.button {
    width: clamp(90px,18vw,180px);
    height: clamp(30px,5vw,50px);
    border-radius: clamp(10px,2vw,20px);
    cursor: pointer;
    color: var(--accent-txt);
    transition: filter 0.15s ease-in-out;

    font-family: var(--accent-font-family);
    font-size: clamp(8px, 1.6vw, 16px);

    &:hover {
        filter: brightness(0.8);
    }
}

.button.basic {
    background-color: var(--subaccent-el);
}

.button.clear {
    background: none;
    width: fit-content;
    height: fit-content;
}

.button.alfa {
    width: fit-content;
    padding: 0 clamp(10px, 2vw, 20px);
    background: none;
}

.button.round {
    width: clamp(35px, 5vw, 50px);
    height: clamp(35px, 5vw, 50px);
    background-color: var(--subaccent-el);
    border-radius: 100%;
}

.button.agreement {
    background-color: green;
}

.button.warning {
    background-color: red;
}

.button.withicon {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    background-color: var(--subaccent-el);

    svg {
        flex-grow: 1;
    }

    span {
        flex-grow: 1;
        text-align: left;
    }
}

.button.underlined {
    background: none;
    width: fit-content;
    height: fit-content;
    text-decoration: underline;
    color: var(--pale-txt);

    font-family: var(--basic-font-family);
    font-size: clamp(8px, 1.6vw, 16px);
}

.button:disabled {
    filter: brightness(0.8);
    &:hover {
        cursor: not-allowed;
        filter: brightness(0.8);
    }
}

